<template>
	<view class="page">
		<view class="padding">
			<view class="pannel-top">
				扫二维码向我付款
			</view>
			<view class="pannel-qr">
				<image :src="qrCodeUrl" mode="widthFix"></image>
			</view>
			<view class="disinput">
				<u-input v-model="qrData" disabled :height="height" />
			</view>
			<u-line></u-line>
			<view class="pannel-botom">
				<view class="pannel-item" @tap="open">
					申请订单
				</view>
				<u-line length="40" direction="col"></u-line>
				<view class="pannel-item" @tap="copy">
					复制链接
				</view>
			</view>
			<u-modal ref="modal"  :show="isModalVisible" showCancelButton>
				<view class="">
					<view style="display:flex;align-items: center; font-size: 0.9rem;padding: 0 0 1rem 0;">
						充值金额
						<view style="flex: 1;">
							
						</view>
						<u-icon @click="() => isModalVisible = false" size="25" name="close"></u-icon>
					</view>
					<view class="z-input">
						<u--input placeholder="请输入充值金额" border="surround" v-model="amount"></u--input>
					</view>
				</view>
				<u-button style="width: 50%;margin:0 auto;" slot="confirmButton" text="确定" type="primary" shape="circle" @click="submit"
					:disabled="amount <= 0"></u-button>


			</u-modal>
			<u-modal @cancel="() => show = false" :show="show" cancelText="知道了" cancelColor="#00a3fa"
				:showConfirmButton="false" :showCancelButton="true" :title="title" :content='content'></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				qrCodeUrl: '',
				height: 100,
				border: true,
				qrData: '',
				title: "提示",
				show: false,
				isModalVisible: false,
				content: " 转账成功后请联系客服",
				amount: null
			}
		},
		computed: {
			...mapGetters(['userInfo']),
			userId() {
				return this.userInfo ? this.userInfo.uid : null;
			}
		},
		mounted() {
			this.getqrcode()
		},
		methods: {
			open() {
				this.isModalVisible = true;
			},
			submit() {
				const amount = this.amount;
				this.$request.post('/system/rechargerecord/initiate', {
					userid:this.userId,
					amount
				}).then(res => {
					if (res.code == 200) {
						this.show = true
						this.isModalVisible=false
						this.amount=null
					}

				})
			},
			copy() {
				uni.setClipboardData({
					data: this.qrData,
					success: function() {
						console.log('success');
					}
				});
			},
			getqrcode() {
				this.$request.get('/system/qr-code/getQRCode', {}).then(res => {
					if (res.code == 200) {
						const data = res.data.qrData
						const qrCodeUrl = 'data:image/png;base64,' + res.data.qrcode;
						this.qrCodeUrl = qrCodeUrl;
						this.qrData = data
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-modal__content__text[data-v-3626fcec] {
		text-align: center;
	}
    .page{
		height: 100% !important;
	}
	.padding {
		background-color: #ffffff;
		width: 90vw;
		height: auto;
		margin: 0 auto;
		padding: 0.6rem;
		margin-top:2rem ;
	}

	.pannel-top {
		text-align: center;
		color: black;
		font-family: SourceHanSansCN-Regular;
		font-size: 24rpx;
	}

	.pannel-qr image {
		padding: 0rem 0.5rem;
		width: 100%;
		text-align: center;
	}

	.disinput {
		padding: 0.3rem 0;

	}

	.pannel-botom {
		display: flex;
		justify-content: space-around;
		height: auto;
		padding-top: 0.7rem;
	}

	.pannel-item {
		width: 100%;
		height: 2rem;
		text-align: center;
		font-size: 0.6rem;
		line-height: 2rem;

	}
	.z-input{
		border: 2rpx solid #cfcfcf;
		border-radius: 0.1rem;
		width: 100%;
	}
</style>